/**
 * 页面固定定位面板组件
 * 用于在网页中直接显示导航链接提取结果
 */
import React, { useState, useEffect, useRef } from 'react';
import './styles.css';
import type { NavigationLink } from '../../utils/linkExtractor';

// 添加日志记录功能
const logger = {
  debug: (msg: string, data?: any) => {
    const info = new Error();
    const lineInfo = info.stack?.split('\n')[2].match(/\((.*):\d+:\d+\)/);
    const file = lineInfo ? lineInfo[1].split('/').pop() : 'unknown';
    const line = info.stack?.split('\n')[2].match(/:(\d+):/);
    console.debug(
      `[PID:${window.performance.now().toFixed(0)}][TID:${Date.now() % 10000}][${file}#${line ? line[1] : '?'}] ${msg}`, 
      data || ''
    );
  },
  info: (msg: string, data?: any) => {
    const info = new Error();
    const lineInfo = info.stack?.split('\n')[2].match(/\((.*):\d+:\d+\)/);
    const file = lineInfo ? lineInfo[1].split('/').pop() : 'unknown';
    const line = info.stack?.split('\n')[2].match(/:(\d+):/);
    console.info(
      `[PID:${window.performance.now().toFixed(0)}][TID:${Date.now() % 10000}][${file}#${line ? line[1] : '?'}] ${msg}`, 
      data || ''
    );
  }
};

interface PanelProps {
  onClose: () => void;
  links: NavigationLink[];
  onExtractAllLinks: () => void;
  onSelectAreaLinks: () => void;
}

const Panel: React.FC<PanelProps> = ({ onClose, links, onExtractAllLinks, onSelectAreaLinks }) => {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const [exportFormat, setExportFormat] = useState<string>('json');
  
  // 拖拽和调整大小相关状态
  const [position, setPosition] = useState({ x: window.innerWidth - 340, y: 80 });
  const [size, setSize] = useState({ width: 320, height: 400 });
  const [isDragging, setIsDragging] = useState(false);
  const [isResizing, setIsResizing] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
  const panelRef = useRef<HTMLDivElement>(null);
  
  // 按钮点击效果相关状态
  const [copiedFeedback, setCopiedFeedback] = useState(false);
  const [exportedFeedback, setExportedFeedback] = useState(false);
  
  // 筛选链接
  const filteredLinks = links.filter(link => 
    link.text.toLowerCase().includes(searchTerm.toLowerCase()) || 
    (link.parent && link.parent.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  /**
   * 开始拖拽面板
   */
  const startDrag = (e: React.MouseEvent) => {
    e.preventDefault();
    
    if (panelRef.current) {
      const rect = panelRef.current.getBoundingClientRect();
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
    }
    
    setIsDragging(true);
    logger.info("开始拖拽面板");
  };

  /**
   * 开始调整面板大小
   */
  const startResize = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsResizing(true);
    logger.info("开始调整面板大小");
  };

  /**
   * 处理鼠标移动事件
   */
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        // 更新面板位置
        setPosition({
          x: e.clientX - dragOffset.x,
          y: e.clientY - dragOffset.y
        });
      } else if (isResizing) {
        // 更新面板大小
        if (panelRef.current) {
          const rect = panelRef.current.getBoundingClientRect();
          const newWidth = Math.max(280, e.clientX - rect.left);
          const newHeight = Math.max(300, e.clientY - rect.top);
          setSize({
            width: newWidth,
            height: newHeight
          });
        }
      }
    };

    const handleMouseUp = () => {
      if (isDragging) {
        setIsDragging(false);
        logger.debug("结束拖拽面板", position);
      }
      if (isResizing) {
        setIsResizing(false);
        logger.debug("结束调整面板大小", size);
      }
    };

    if (isDragging || isResizing) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, isResizing, dragOffset, position, size]);

  /**
   * 触发获取所有链接
   */
  const handleExtractAllLinks = () => {
    logger.info("用户请求获取所有链接");
    onExtractAllLinks();
  };

  /**
   * 触发选择区域获取链接
   */
  const handleSelectAreaLinks = () => {
    logger.info("用户请求选择区域获取链接");
    onSelectAreaLinks();
  };

  /**
   * 导出链接数据
   */
  const exportLinks = () => {
    if (links.length === 0) return;
    
    logger.info(`导出链接数据，格式：${exportFormat}，数量：${links.length}`);
    
    let exportData: string = '';
    let mimeType: string = 'application/json';
    let fileExt: string = 'json';
    
    // 根据选择的格式生成导出数据
    switch (exportFormat) {
      case 'json':
        exportData = JSON.stringify(links, null, 2);
        break;
        
      case 'csv':
        const headers = 'URL,文本,是否活动,父级菜单\n';
        const rows = links.map(link => 
          `"${link.url}","${link.text}","${link.isActive ? '是' : '否'}","${link.parent || ''}"`
        ).join('\n');
        exportData = headers + rows;
        mimeType = 'text/csv';
        fileExt = 'csv';
        break;
        
      case 'html':
        exportData = `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航链接</title>
  <style>
    body { font-family: Arial, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    tr:nth-child(even) { background-color: #f9f9f9; }
  </style>
</head>
<body>
  <h1>导航链接 - ${new Date().toLocaleString()}</h1>
  <p>链接数量: ${links.length}</p>
  <table>
    <thead>
      <tr>
        <th>链接文本</th>
        <th>URL</th>
        <th>状态</th>
        <th>父级菜单</th>
      </tr>
    </thead>
    <tbody>
      ${links.map(link => `
      <tr>
        <td>${link.text}</td>
        <td><a href="${link.url}" target="_blank">${link.url}</a></td>
        <td>${link.isActive ? '活动' : '-'}</td>
        <td>${link.parent || '-'}</td>
      </tr>`).join('')}
    </tbody>
  </table>
</body>
</html>`;
        mimeType = 'text/html';
        fileExt = 'html';
        break;
    }
    
    // 创建下载链接
    const blob = new Blob([exportData], { type: mimeType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `navigation-links.${fileExt}`;
    a.click();
    
    // 清理URL对象
    setTimeout(() => URL.revokeObjectURL(url), 100);
    
    // 显示视觉反馈
    setExportedFeedback(true);
    setTimeout(() => setExportedFeedback(false), 1000);
    
    logger.debug("链接导出完成", { format: exportFormat, count: links.length });
  };

  /**
   * 复制链接数据到剪贴板
   */
  const copyToClipboard = () => {
    if (links.length === 0) return;
    
    logger.info(`复制链接数据到剪贴板，格式：${exportFormat}，数量：${links.length}`);
    
    let copyText = '';
    
    copyText = links.map((link, index) => 
      `${index + 1}.${link.text}: ${link.url}`
    ).join('\n');
 
    
    navigator.clipboard.writeText(copyText)
      .then(() => {
        // 显示视觉反馈
        setCopiedFeedback(true);
        setTimeout(() => setCopiedFeedback(false), 1000);
        
        logger.debug("链接已复制到剪贴板", { format: exportFormat, count: links.length });
      })
      .catch(err => {
        logger.debug("复制失败", err);
        console.error('复制失败:', err);
      });
  };

  // 应用自定义样式
  const panelStyle = {
    top: `${position.y}px`,
    left: `${position.x}px`,
    width: `${size.width}px`,
  };

  const contentStyle = {
    height: `${size.height - 100}px`,
  };

  /**
   * 返回拖拽和调整大小状态的CSS类名
   */
  const getPanelClassName = (isDragging: boolean, isResizing: boolean) => {
    const baseClass = "nav-panel-container";
    if (isDragging) return `${baseClass} dragging`;
    if (isResizing) return `${baseClass} resizing`;
    return baseClass;
  };

  return (
    <div 
      className={getPanelClassName(isDragging, isResizing)} 
      style={panelStyle}
      ref={panelRef}
    >
      <div 
        className="nav-panel-header"
        onMouseDown={startDrag}
      >
        <h3 className="nav-panel-title">网页导航链接</h3>
        <div className="nav-panel-actions">
          <button className="nav-panel-btn nav-panel-close-btn" onClick={onClose}>×</button>
        </div>
      </div>
      
      <div className="nav-panel-tools">
        <div className="nav-panel-action-btns">
          <button 
            className="nav-panel-icon-btn" 
            onClick={handleExtractAllLinks}
            title="获取所有链接"
          >
           <svg 
             viewBox="0 0 1024 1024" 
             style={{ width: '16px', height: '16px' }} 
             version="1.1" 
             xmlns="http://www.w3.org/2000/svg" 
             p-id="4089"
           >
             <path d="M804.571429 0v73.142857h-73.142858V0h73.142858zM658.285714 0v73.142857H585.142857V0h73.142857zM512 0v73.142857H438.857143V0h73.142857zM365.714286 0v73.142857H292.571429V0h73.142857zM219.428571 0v73.142857H146.285714V0h73.142857zM73.142857 0v73.142857H0V0h73.142857z m950.857143 0v146.285714h-73.142857V73.142857h-73.142857V0h146.285714zM73.142857 146.285714v73.142857H0V146.285714h73.142857z m950.857143 73.142857v73.142858h-73.142857V219.428571h73.142857zM73.142857 292.571429v73.142857H0V292.571429h73.142857z m950.857143 73.142857v73.142857h-73.142857V365.714286h73.142857zM73.142857 438.857143v73.142857H0V438.857143h73.142857z m950.857143 73.142857v73.142857h-73.142857V512h73.142857zM73.142857 585.142857v73.142857H0V585.142857h73.142857z m277.942857-234.057143L702.171429 438.857143 599.771429 541.257143l102.4 102.4-51.2 58.514286-109.714286-102.4L438.857143 702.171429 351.085714 351.085714zM1024 658.285714v73.142857h-73.142857V658.285714h73.142857zM73.142857 731.428571v73.142858H0v-73.142858h73.142857z m950.857143 73.142858v73.142857h-73.142857v-73.142857h73.142857zM73.142857 877.714286v73.142857h73.142857v73.142857H0v-146.285714h73.142857z m219.428572 73.142857v73.142857H219.428571v-73.142857h73.142858z m146.285714 0v73.142857H365.714286v-73.142857h73.142857z m146.285714 0v73.142857H512v-73.142857h73.142857z m146.285714 0v73.142857H658.285714v-73.142857h73.142857z m146.285715 0v73.142857h-73.142857v-73.142857h73.142857z m146.285714 0v73.142857h-73.142857v-73.142857h73.142857z" fill="currentColor" p-id="4090"></path>
           </svg>
           </button>
          
          <button 
            className="nav-panel-icon-btn" 
            onClick={handleSelectAreaLinks}
            title="选择区域获取链接"
          >
            <svg 
              viewBox="0 0 1024 1024" 
              style={{ width: '16px', height: '16px' }} 
              version="1.1" 
              xmlns="http://www.w3.org/2000/svg" 
              p-id="2276"
            >
              <path d="M1012.622222 880.64l-134.257778 134.257778c-6.826667 6.826667-20.48 6.826667-27.306666 0-6.826667-6.826667-6.826667-20.48 0-27.306667l134.257778-134.257778c6.826667-6.826667 20.48-6.826667 27.306666 0 9.102222 6.826667 9.102222 20.48 0 27.306667zM746.382222 880.64l-118.328889 118.328889c-6.826667 6.826667-20.48 6.826667-27.306666 0-6.826667-6.826667-6.826667-20.48 0-27.306667l118.328889-118.328889c6.826667-6.826667 20.48-6.826667 27.306666 0 6.826667 6.826667 6.826667 20.48 0 27.306667zM996.693333 630.328889l-118.328889 118.328889c-6.826667 6.826667-20.48 6.826667-27.306666 0-6.826667-6.826667-6.826667-20.48 0-27.306667l118.328889-118.328889c6.826667-6.826667 20.48-6.826667 27.306666 0 9.102222 6.826667 9.102222 18.204444 0 27.306667z" p-id="2277" fill="currentColor"></path><path d="M509.724444 489.244444L634.88 978.488889c2.275556 11.377778-4.551111 22.755556-13.653333 25.031111-11.377778 2.275556-22.755556-4.551111-25.031111-13.653333L471.04 500.622222c-2.275556-11.377778 4.551111-22.755556 13.653333-25.031111 11.377778-4.551111 22.755556 2.275556 25.031111 13.653333z" p-id="2278" fill="currentColor"></path><path d="M486.968889 512L976.213333 637.155556c11.377778 2.275556 22.755556-4.551111 25.031111-13.653334 2.275556-11.377778-4.551111-22.755556-13.653333-25.031111l-489.244444-125.155555c-11.377778-2.275556-22.755556 4.551111-25.031111 13.653333-4.551111 11.377778 2.275556 22.755556 13.653333 25.031111zM746.382222 853.333333l134.257778 134.257778c6.826667 6.826667 6.826667 20.48 0 27.306667-6.826667 6.826667-20.48 6.826667-27.306667 0l-134.257777-134.257778c-6.826667-6.826667-6.826667-20.48 0-27.306667 6.826667-6.826667 18.204444-6.826667 27.306666 0zM880.64 719.075556l134.257778 134.257777c6.826667 6.826667 6.826667 20.48 0 27.306667-6.826667 6.826667-20.48 6.826667-27.306667 0l-134.257778-134.257778c-6.826667-6.826667-6.826667-20.48 0-27.306666 6.826667-6.826667 18.204444-6.826667 27.306667 0zM36.408889 20.48c-11.377778 0-18.204444 9.102222-18.204445 18.204444V91.022222c0 11.377778 9.102222 18.204444 18.204445 18.204445 11.377778 0 18.204444-9.102222 18.204444-18.204445V38.684444c2.275556-9.102222-6.826667-18.204444-18.204444-18.204444zM36.408889 172.942222c-11.377778 0-18.204444 9.102222-18.204445 18.204445v52.337777c0 11.377778 9.102222 18.204444 18.204445 18.204445 11.377778 0 18.204444-9.102222 18.204444-18.204445V191.146667c2.275556-11.377778-6.826667-18.204444-18.204444-18.204445zM36.408889 323.128889c-11.377778 0-18.204444 9.102222-18.204445 18.204444v52.337778c0 11.377778 9.102222 18.204444 18.204445 18.204445 11.377778 0 18.204444-9.102222 18.204444-18.204445V341.333333c2.275556-9.102222-6.826667-18.204444-18.204444-18.204444zM36.408889 475.591111c-11.377778 0-18.204444 9.102222-18.204445 18.204445V546.133333c0 11.377778 9.102222 18.204444 18.204445 18.204445 11.377778 0 18.204444-9.102222 18.204444-18.204445v-52.337777c2.275556-9.102222-6.826667-18.204444-18.204444-18.204445zM36.408889 628.053333c-11.377778 0-18.204444 9.102222-18.204445 18.204445v52.337778c0 11.377778 9.102222 18.204444 18.204445 18.204444 11.377778 0 18.204444-9.102222 18.204444-18.204444v-52.337778c2.275556-11.377778-6.826667-18.204444-18.204444-18.204445zM36.408889 778.24c-11.377778 0-18.204444 9.102222-18.204445 18.204444v52.337778c0 11.377778 9.102222 18.204444 18.204445 18.204445 11.377778 0 18.204444-9.102222 18.204444-18.204445V796.444444c2.275556-9.102222-6.826667-18.204444-18.204444-18.204444z" p-id="2279" fill="currentColor"></path><path d="M848.782222 20.48c-11.377778 0-18.204444 9.102222-18.204444 18.204444V91.022222c0 11.377778 9.102222 18.204444 18.204444 18.204445 11.377778 0 18.204444-9.102222 18.204445-18.204445V38.684444c0-9.102222-6.826667-18.204444-18.204445-18.204444zM848.782222 172.942222c-11.377778 0-18.204444 9.102222-18.204444 18.204445v52.337777c0 11.377778 9.102222 18.204444 18.204444 18.204445 11.377778 0 18.204444-9.102222 18.204445-18.204445V191.146667c0-11.377778-6.826667-18.204444-18.204445-18.204445zM848.782222 323.128889c-11.377778 0-18.204444 9.102222-18.204444 18.204444v52.337778c0 11.377778 9.102222 18.204444 18.204444 18.204445 11.377778 0 18.204444-9.102222 18.204445-18.204445V341.333333c0-9.102222-6.826667-18.204444-18.204445-18.204444z" p-id="2280" fill="currentColor"></path><path d="M866.986667 38.684444c0-11.377778-9.102222-18.204444-18.204445-18.204444H796.444444c-11.377778 0-18.204444 9.102222-18.204444 18.204444 0 11.377778 9.102222 18.204444 18.204444 18.204445h52.337778c11.377778 2.275556 18.204444-6.826667 18.204445-18.204445zM716.8 38.684444c0-11.377778-9.102222-18.204444-18.204444-18.204444h-52.337778c-11.377778 0-18.204444 9.102222-18.204445 18.204444 0 11.377778 9.102222 18.204444 18.204445 18.204445h52.337778c9.102222 2.275556 18.204444-6.826667 18.204444-18.204445zM564.337778 38.684444c0-11.377778-9.102222-18.204444-18.204445-18.204444h-52.337777c-11.377778 0-18.204444 9.102222-18.204445 18.204444 0 11.377778 9.102222 18.204444 18.204445 18.204445H546.133333c9.102222 2.275556 18.204444-6.826667 18.204445-18.204445zM411.875556 38.684444c0-11.377778-9.102222-18.204444-18.204445-18.204444H341.333333c-11.377778 0-18.204444 9.102222-18.204444 18.204444 0 11.377778 9.102222 18.204444 18.204444 18.204445h52.337778c11.377778 2.275556 18.204444-6.826667 18.204445-18.204445zM261.688889 38.684444c0-11.377778-9.102222-18.204444-18.204445-18.204444H188.871111c-11.377778 0-18.204444 9.102222-18.204444 18.204444 0 11.377778 9.102222 18.204444 18.204444 18.204445h52.337778c11.377778 2.275556 20.48-6.826667 20.48-18.204445zM109.226667 38.684444c0-11.377778-9.102222-18.204444-18.204445-18.204444H36.408889c-11.377778 0-18.204444 9.102222-18.204445 18.204444 0 11.377778 9.102222 18.204444 18.204445 18.204445H91.022222c9.102222 2.275556 18.204444-6.826667 18.204445-18.204445z" p-id="2281" fill="currentColor"></path><path d="M411.875556 851.057778c0-11.377778-9.102222-18.204444-18.204445-18.204445H341.333333c-11.377778 0-18.204444 9.102222-18.204444 18.204445 0 11.377778 9.102222 18.204444 18.204444 18.204444h52.337778c11.377778 0 18.204444-9.102222 18.204445-18.204444zM261.688889 851.057778c0-11.377778-9.102222-18.204444-18.204445-18.204445H188.871111c-11.377778 0-18.204444 9.102222-18.204444 18.204445 0 11.377778 9.102222 18.204444 18.204444 18.204444h52.337778c11.377778 0 20.48-9.102222 20.48-18.204444zM109.226667 851.057778c0-11.377778-9.102222-18.204444-18.204445-18.204445H36.408889c-11.377778 0-18.204444 9.102222-18.204445 18.204445 0 11.377778 9.102222 18.204444 18.204445 18.204444H91.022222c9.102222 0 18.204444-9.102222 18.204445-18.204444z" p-id="2282" fill="currentColor"></path>
            </svg>
          </button>
          
          <button 
            className={`nav-panel-icon-btn ${copiedFeedback ? 'feedback-active' : ''}`}
            onClick={copyToClipboard}
            title="复制链接"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 4V16C8 16.5304 8.21071 17.0391 8.58579 17.4142C8.96086 17.7893 9.46957 18 10 18H18C18.5304 18 19.0391 17.7893 19.4142 17.4142C19.7893 17.0391 20 16.5304 20 16V7.242C20 6.97556 19.9467 6.71181 19.8433 6.46624C19.7399 6.22068 19.5885 5.99824 19.398 5.812L16.188 2.602C16.0018 2.41148 15.7793 2.26012 15.5338 2.15672C15.2882 2.05333 15.0244 2 14.758 2H10C9.46957 2 8.96086 2.21071 8.58579 2.58579C8.21071 2.96086 8 3.46957 8 4Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M16 18V20C16 20.5304 15.7893 21.0391 15.4142 21.4142C15.0391 21.7893 14.5304 22 14 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V8C4 7.46957 4.21071 6.96086 4.58579 6.58579C4.96086 6.21071 5.46957 6 6 6H8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          
          <button 
            className={`nav-panel-icon-btn ${exportedFeedback ? 'feedback-active' : ''}`}
            onClick={exportLinks}
            title="导出链接"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M7 10L12 15L17 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M12 15V3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>

          <select
            value={exportFormat}
            onChange={(e) => setExportFormat(e.target.value)}
            className="nav-panel-mini-select"
            title="选择导出格式"
          >
            <option value="json">JSON</option>
            <option value="csv">CSV</option>
            <option value="html">文本</option>
          </select>
        </div>
      
        <div className="nav-panel-search">
          <input
            type="text"
            placeholder="搜索链接..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="nav-panel-input"
          />
        </div>
      </div>
      
      <div className="nav-panel-info">
        共 {links.length} 个链接
        {filteredLinks.length !== links.length && (
          <span> • 已筛选 {filteredLinks.length} 个</span>
        )}
      </div>
      
      <div className="nav-panel-content" style={contentStyle}>
        {filteredLinks.length > 0 ? (
          <table className="nav-panel-table">
            <thead>
              <tr>
                <th>文本</th>
                <th>URL</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              {filteredLinks.map((link, index) => (
                <tr key={index} className={link.isActive ? 'nav-panel-active-link' : ''}>
                  <td>{link.text}</td>
                  <td>
                    <a 
                      href={link.url} 
                      target="_blank" 
                      rel="noreferrer" 
                      className="nav-panel-link"
                    >
                      {link.url.length > 30 ? link.url.substring(0, 30) + '...' : link.url}
                    </a>
                  </td>
                  <td>{link.isActive ? '✓' : ''}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <div className="nav-panel-empty">没有找到匹配的链接</div>
        )}
      </div>
      
      <div className="nav-panel-footer">
        <span>网页导航链接提取器 v1.0.0</span>
        <p>by 无敌小宝</p>
        <p>2025-04-23</p>
        <p>
          <a href="https://gitee.com/slcnx/web-navigation-link-extractor" target="_blank" rel="noopener noreferrer">
            github源码地址
          </a>
        </p>
      </div>
      
      <div 
        className="nav-panel-resize-handle"
        onMouseDown={startResize}
        title="调整面板大小"
      ></div>
    </div>
  );
};

export default Panel; 